The vue-i18n package is a Vue.js plugin for internationalization. It integrates seamlessly with Vue.js applications to enable easy localization and translation of text content within the app. It supports a variety of features including pluralization, datetime formatting, number formatting, and allows for the organization of translation messages in different locales.
Localization
This feature allows you to localize your application's content. You can define translation messages for different locales and use the $t function to display the translated message based on the current locale.
{"template": "<p>{{ $t('message.hello') }}</p>", "i18n": {"messages": {"en": {"message": {"hello": "Hello World!"}}, "fr": {"message": {"hello": "Bonjour le monde!"}}}}}Pluralization
Pluralization support allows you to handle singular and plural forms of words depending on the count. The $tc function is used to handle this, and it automatically selects the correct form based on the provided count.
{"template": "<p>{{ $tc('message.plural', 1) }}</p><p>{{ $tc('message.plural', 10) }}</p>", "i18n": {"messages": {"en": {"message": {"plural": "{n} apple|{n} apples"}}}}}DateTime Formatting
DateTime formatting enables you to format dates and times according to the locale's conventions. The $d function is used to format a JavaScript Date object into a readable string.
{"template": "<p>{{ $d(new Date(), 'short') }}</p>", "i18n": {"dateTimeFormats": {"en": {"short": {"year": "numeric", "month": "short", "day": "numeric"}}}}}Number Formatting
Number formatting allows you to format numbers in a locale-sensitive manner. The $n function is used to format numbers, such as currencies, percentages, or decimal numbers, according to the locale's formatting rules.
{"template": "<p>{{ $n(1234567.89, 'currency') }}</p>", "i18n": {"numberFormats": {"en": {"currency": {"style": "currency", "currency": "USD"}}}}}React Intl is similar to vue-i18n but is designed for React applications. It provides a set of React components and an API to format dates, numbers, and strings, including pluralization and handling translations.
i18next is a full-featured i18n library for JavaScript. It works with various frameworks, including React, Vue, and Angular. It offers features like pluralization, formatting, and supports backend loading of translation resources, making it a versatile alternative to vue-i18n.
Polyglot.js is a tiny I18n helper library written in JavaScript, influenced by the Ruby library I18n. It doesn't have direct integration with Vue.js but can be used in any JavaScript application for simple translation purposes, with a straightforward API for interpolation and pluralization.
Angular Translate is an AngularJS module for internationalization. It provides services and directives that enable translation support similar to vue-i18n but is specifically tailored for AngularJS applications.
Internationalization plugin for Vue.js
This repository is for Vue I18n v8.x and Vue 2
If you want to know about how to usage for Vue I18n v9 on Vue 3, See the this repository)
We will follow Vue v2 maintenance lifespan
About Vue I18n v8.x, See here
If you want to read Vue I18n v9 docs, See here
Detailed changes for each release are documented in the CHANGELOG.md.
Please make sure to read the Issue Reporting Checklist before opening an issue. Issues not conforming to the guidelines may be closed immediately.
Please make sure to read the Contributing Guide before making a pull request.
FAQs
Internationalization plugin for Vue.js
The npm package vue-i18n receives a total of 1,120,563 weekly downloads. As such, vue-i18n popularity was classified as popular.
We found that vue-i18n demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.